<template>
	<view class="">
		<scroll-view class="scroll_x" :style="[scrollStyle]" scroll-x :scroll-left='scroll_left' scroll-with-animation>
			<view class="menu">
				<view class="menu_name">
					<view class="flex1 menu_item" :class="{'menu_itema':current == index}"
						:style="[{'transition':`${duration}ms`},current == index ? activeStyle : inactiveStyle]"
						v-for="(item, index) in list" :key="index" @click="clickTabs(index)">
						{{item[keyName]}}
					</view>
				</view>
				<view class="menu_mark" v-if="box_data.length>0"
					:style="[{'--mark_left':`${box_data[current].mark}px`},markStyle]">
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/*
	 * zhTabs 滑动菜单，滑动菜单，自动计算滑块宽度，自动居中，支持自定义样式，高度自定义
	 * @property {Array}  list 菜单数据
	 * @property {String} keyName 从list元素对象中读取的键名
	 * @property {Number} current 当前选中标签的索引
	 * @property {Number} duration 滑块移动一次所需的时间，单位ms
	 * @property {String} bgColor 菜单背景颜色
	 * @property {Number} round 菜单圆角
	 * @property {String} markBgColor  选择中滑块的背景颜色
	 * @property {Object} activeStyle 选择中时的样式
	 * @property {Object} inactiveStyle 非选中时的样式
	 * 
	 */
	export default {
		props: {
			list: {
				typeof: Array,
				default: []
			},
			keyName: {
				typeof: String,
				default: () => 'name'
			},
			current: {
				typeof: Number,
				default: () => 0
			},
			duration: {
				typeof: Number,
				default: () => 250
			},
			bgColor: {
				typeof: String,
				default: () => '#EBEBEB'
			},
			round: {
				typeof: Number,
				default: () => 40
			},
			height: {
				typeof: Number,
				default: () => 54
			},
			markBgColor: {
				typeof: String,
				default: () => '#5CC745'
			},
			activeStyle: {
				typeof: Object,
				default: () => ({})
			},
			inactiveStyle: {
				typeof: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				contentScrollW: 0, //菜单长度
				scroll_left: 0, //横向滚动条位置
				box_data: [], //盒子数据
			}
		},
		mounted() {
			this.update_poses();
		},
		methods: {
			clickTabs(index) {
				this.$emit('update:current', index)
				this.$emit('click', index);
				this.scroll_left = this.box_data[index].left - this.contentScrollW / 2 + this.box_data[index].width / 2
			},
			update_poses() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll_x').boundingClientRect(data => {
					// 如果节点尚未生成，data值为null，循环调用执行
					if (!data) {
						setTimeout(() => {
							this.update_poses();
						}, 10);
						return;
					}
					this.contentScrollW = data.width
					let arr = []
					const querya = uni.createSelectorQuery().in(this);
					querya.selectAll('.menu_item').boundingClientRect(res => {
						res.map(item => {
							arr.push({
								width: item.width, //盒子的宽度
								left: item.left, //盒子距离左边的位置
								mark: (item.left + item.right) / 2 - data.left, //滑块距离左边的位置
							})
						})
						this.box_data = arr
					}).exec();
				}).exec();
			}
		},
		computed: {
			scrollStyle() { //菜单样式
				return {
					'background': this.bgColor,
					'border-radius': `${this.round}rpx`,
					'height': `${this.height}rpx`,
				}
			},
			markStyle() { //选择菜单
				return {
					'border-radius': `${this.round}rpx`,
					'width': `${this.box_data.length>0? this.box_data[this.current].width:0}px`,
					'background': this.markBgColor,
					'transition': `${this.duration}ms`,
				}
			},
		},
	}
</script>

<style lang="scss">
	.scroll_x {
		width: 100%;
		white-space: nowrap;

		.menu {
			position: relative;
			height: 100%;

			.menu_name {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 99;
				width: 100%;
				height: 100%;
				display: flex;

				.menu_item {
					height: 100%;
					color: #666;
					font-size: 28upx;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 20upx;
				}

				.menu_itema {
					color: #fff;
				}
			}

			.menu_mark {
				height: 100%;
				position: absolute;
				top: 50%;
				left: var(--mark_left);
				transform: translate(-50%, -50%);
			}

		}
	}
</style>